@charset "utf-8";
@import "iconfont";
@import "common";

.posi{
    position: initial;
}
.news{
    padding: 105px 0 0;
    h2{
        font-size: 30px;
        color: #ff6b08;
        margin-bottom: 40px;
    }
    .news-wrap{
        height: 18%;
        background: #fff;
        margin-bottom: 20px;
        a{
            overflow: hidden;
            display: block;
            border: 1px solid #eeeeee;
            border-radius: 3px;
            position: relative;
            img{
                height: 100%;
                width: 100%;
            }
            p{
                opacity: .8;
                color: #fff;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin: 0;
                background: rgba(0,0,0,.8);
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                padding: 4%;
            }
            &:hover{
                img{
                    opacity: .8;
                }
                p{
                    opacity: 1;
                }
            }
        }
    }
    .news-list{
        height: 18%;
        padding: 0;
        margin-bottom: 20px;
        position: relative;
        h3{
            margin-top: 10px;
            font-size: 18px;
            a{
                text-decoration: none;
                color: #666666;
                &:hover{
                    color: #ff6900;
                }
            }
        }
        h5{
            color: #2a2a2a;
            font-size: 14px;
        }
        p{
            color: #2a2a2a;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
        .detail{
            float: right;
            display: block;
            a{
                border: 1px solid #ff6900;
                border-radius: 1.5em;
                color: #ff6900;
                font-size: 14px;
                display: inline-block;
                padding: .3em 1.5em;
                text-decoration: none;
                &:hover{
                    background: #ff6900;
                    color: #fff;
                }
            }
        }
    }
    .page-new{
        margin: 0 15px;
        border-top: 1px dashed #d4d4d4;
        text-align: center;
        ul{
            display: inline-block;
            a{
                color: #2a2a2a;
                &:hover{
                    color: #fff;
                    background: #e34637;
                }
                &.active{
                    color: #fff;
                    background: #e34637;
                }
            }
        }
    }
}

@media (max-width:320px){
    .page-new{
        ul{
            li{
                &:first-of-type{
                    display: none;
                    
                }
            }
        }
    }
}
@media (max-width:375px){
    .page-new{
        ul{
            li{
                &:nth-last-of-type(3){
                    display: none;
                }
            }
        }
    }
}
@media (max-width:414px){
    .page-new{
        ul{
            li{
                &:nth-last-of-type(2){
                    display: none;
                }
            }
        }
    }
}

@media (min-width: 768px){
    .news-list{
        h3{
            margin-top: 5px;
        }
    }
}
@media (max-width: 767px){
    .news{
        padding: 30px 0 0;
    }
    .date{
        margin: 0;
        position: absolute;
        right: 15px;
        bottom: 0;
    }
    .news-list{
        .posi{
            padding-left: 0;
            h3{
                margin-top: 5px;
                font-size: 16px;
            }
        }
        
        p{
            margin-bottom: 20px;
        }
    }
}
@media (max-width: 530px){
     .news-list{
        .posi{
            margin-left: -5px;
            p{
                display: none;
            }
        }
    }
}